import React from 'react';
import { Typography, Button } from 'antd';
import { useTheme, themeBackgrounds } from '../../contexts/ThemeContext';

const { Title, Paragraph } = Typography;

const CTASection: React.FC = () => {
  const { themeType } = useTheme();
  const isDark = themeType === 'dark';

  return (
    <div style={{ 
      padding: '80px 24px',
      background: isDark 
        ? 'linear-gradient(180deg, #141519 0%, #0D0E11 100%)' 
        : 'linear-gradient(180deg, #F7F8FC 0%, #FCFCFF 100%)',
      textAlign: 'center' 
    }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <Title 
          level={2} 
          style={{ 
            marginBottom: 24,
            color: isDark ? '#fff' : '#000'
          }}
        >
          开始构建你的 AI 应用
        </Title>
        <Paragraph style={{ 
          fontSize: 16, 
          marginBottom: 32, 
          opacity: 0.7,
          color: isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'
        }}>
          使用 Ant Design X，快速创建专业的 AI 界面
        </Paragraph>
        <Button type="primary" size="large">立即开始</Button>
      </div>
    </div>
  );
};

export default CTASection; 